import { defaultNavBar } from 'user/site';
import React = require('react');
import ReactDOM = require('react-dom');
// import { PageComponent, PageHeader, PageFooter, PageView } from 'mobileControls';
import * as chitu from "maishu-chitu";

export default function (page: chitu.Page) {
    let app = page.app as chitu.Application;

    interface InvoicePageProps extends React.Props<InvoicePage> {
    }
    interface InvoicePageState {
        type: '个人' | '公司',
        title: string
    }

    let callback: (invoice: string) => void = page.data.callback as any;
    class InvoicePage extends React.Component<InvoicePageProps, InvoicePageState>{
        constructor(props) {
            super(props);
            this.state = { title: '', type: '个人' };
        }
        private confirm() {
            if (callback) {
                callback(`类型：${this.state.type}，抬头：${this.state.title}`);
            }
            app.back();
        }
        render() {
            let type = this.state.type;
            let title = this.state.title;
            return [
                <header key="h">
                    {defaultNavBar(page, { title: '发票信息' })}
                </header>,
                <footer key="f">
                    <div className="container" style={{ paddingTop: 10, paddingBottom: 10 }}>
                        <button onClick={() => this.confirm()} className="btn btn-block btn-primary">确认</button>
                    </div>
                </footer>,
                <section key="v">
                    <form className="container">
                        <div style={{ paddingTop: 20 }}>
                            <label className="choose">
                                <input name="type" checked={type != '公司'} type="radio"
                                    onChange={() => {
                                        // this.state.type = '个人';
                                        // this.setState(this.state);
                                        this.setState({ type: '个人' })
                                    }} /> 个人
                        </label>
                        </div>
                        <hr />
                        <div>
                            <label className="choose">
                                <input name="type" checked={type == '公司'} type="radio"
                                    onChange={() => {
                                        // this.state.type = '公司';
                                        // this.setState(this.state);
                                        this.setState({ type: '公司' })
                                    }} /> 公司
                        </label>
                        </div>
                        <hr />
                        <div className="form-group">
                            <label>发票抬头</label>
                            <input value={title} type="text" className="form-control" placeholder="个人或公司名称"
                                onChange={(e) => {
                                    // this.state.title = (e.target as HTMLInputElement).value;
                                    // this.setState(this.state);
                                    this.setState({ title: e.target.value })
                                }} />
                        </div>
                    </form>
                </section>
            ];
        }
    }

    ReactDOM.render(<InvoicePage />, page.element);
}